{extend name='./layout/_content_open'}

{block name='content_open'}
<div class="panel panel-success">
    <div class="panel-body">
        <form class="form-horizontal" role="form" id="edit-form">
            <input type="hidden" name="id" id="id" value="{$role->id}">
            <div class="form-group">
                <label class="col-sm-2 control-label">角色名称</label>
                <div class="col-sm-8">
                    <input type="text" class="form-control" id="name" name="name"
                           placeholder="输入角色名称" required data-bv-notempty-message="角色名称不为空"
                           pattern="^.{2,10}$" data-bv-regexp-message="角色名称在两到十个字符之间"
                           value="{$role->name}" disabled/>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-2 control-label">代码</label>
                <div class="col-sm-8">
                    <input type="text" class="form-control" id="code" name="code"
                           placeholder="输入代码，供程序调用" required data-bv-notempty-message="代码不为空"
                           pattern="^.{2,10}$" data-bv-regexp-message="代码在两到十个字符之间"
                           value="{$role->code}" disabled/>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-2 control-label">描述</label>
                <div class="col-sm-8">
                    <textarea class="form-control" id="represent" name="represent"
                              placeholder="输入描述" required data-bv-notempty-message="描述不为空"
                              pattern="^.{2,1000}$" data-bv-regexp-message="描述在两到一千个字符之间"
                              disabled>{$role->represent}</textarea>
                </div>
            </div>
        </form>
        <!-- 表格主体-->
        <div class="table-responsive">
            <table id="table">
            </table>
        </div>
    </div>
    <div class="panel-footer">
        <div class="row">
            <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">

            </div>
            <div class="text-center col-xs-4 col-sm-4 col-md-4 col-lg-4">

            </div>
            <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 text-right">
                <button class="btn btn-success btn-sm" id="btn-edit" onclick="view.submit();">保存</button>
                <button class="btn btn-warning" id="btn-canal" onclick="parent.view.close();">取消</button>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        $(function () {
            view.init();
        });
        var view = {
            table: null,//表格对象
            dataUrl: '/sys/role/get_menus?id={$role->id}',//数据加载地址
            saveUrl: '/sys/role/roleSetting?id={$role->id}',//删除数据地址
            selectedData: null,//选中的数据
            id: 0,//操作数据的主键
            defaultColumns: function () {
                var that = this;
                //表头数据列
                return [
                    {field: 'selectItem', checkbox: true, checked: 'hasPermission'},
                    {field: 'name', title: '名称'},
                    {
                        field: 'is_menu', title: '是否菜单', formatter: function (arg) {
                            if (arg === 0) {
                                return '否';
                            } else if (arg === 1) {
                                return '是';
                            } else {
                                return '其他';
                            }
                        }
                    },
                    {field: 'module_name', title: '模块名称'},
                    {field: 'action_name', title: '控制器名称'},
                    {field: 'function_name', title: '方法名称'},
                    {
                        field: 'create_time', title: '创建时间', align: 'center', sortable: false
                    },
                    {
                        field: 'update_time', title: '修改时间', align: 'center'
                    }, {field: 'sort', title: '排序', align: 'center'}
                ];
            },
            init: function () {
                var that = this;
                that.table = $('#table').bootstrapTreeTable({
                    id: 'id',// 选取记录返回的值
                    code: 'id',// 用于设置父子关系
                    parentCode: 'parent_id',// 用于设置父子关系
                    rootCodeValue: "",//设置根节点code值----可指定根节点，默认为null,"",0,"0"
                    type: 'get',//请求数据的ajax类型
                    url: that.dataUrl,   //请求数据的ajax的url
                    ajaxParams: {}, //请求数据的ajax的data属性
                    expandColumn: 1,//在哪一列上面显示展开按钮,从0开始
                    striped: true,   //是否各行渐变色
                    expandAll: true,  //是否全部展开
                    columns: this.defaultColumns(),//列数组
                    responseHandler: function (argument) {
                        console.log(argument);
                        return argument;
                    },
                    clickToSelect: true,//点击行选中
                    expanderExpandedClass: 'glyphicon  glyphicon-triangle-bottom',
                    expanderCollapsedClass: 'glyphicon glyphicon-triangle-right',
                    saveState: true,
                    saveStateName: 'tree-grid-state-role-menu',
                    classes: 'table table-striped table-hover table-no-left-right-border',
                })
            },
            submit: function () {
                var obj = this.table.bootstrapTreeTable('getSelections');
                console.log(obj);
                if (obj.length < 1) {
                    layer.msg('请至少勾选一项菜单', {icon: 2});
                    return false;
                }
                var menuIds = "";
                for (var i = 0; i < obj.length; i++) {
                    menuIds += obj[i].id + '-';
                }
                menuIds = menuIds.slice(0, menuIds.length - 1);
                console.log(menuIds);
                $('#btn-edit').attr('disabled', 'disabled');
                $.ajax({
                    url: view.saveUrl,
                    type: 'post',
                    dataType: 'json',
                    data: {
                        menuIds: menuIds
                    },
                    success: function (data) {
                        console.log(data);
                        if (data.status) {
                            layer.msg(data.msg, {icon: 1});
                            //wpgaci.goUrl('/sys/role/index', 1.5);
                            parent.view.table.bootstrapTable('refresh');
                            setTimeout(function () {
                                parent.view.close();
                            }, 1500);
                        } else {
                            layer.msg(data.msg, {icon: 1});
                            $('#btn-edit').removeAttr('disabled');
                        }
                    },
                    error: function () {
                        layer.msg('网络错误，请稍后再试', {icon: 2});
                        $('#btn-edit').removeAttr('disabled');
                    }
                });
            }
        };
    </script>
</div>
{/block}